<script>
    import { KButton } from '@ikun-ui/button'
</script>

<div class="flex items-center flex-wrap">
    <KButton type="info" cls="mx-2">
        info
    </KButton>
    <KButton type="error" cls="mx-2">
        error
    </KButton>
    <KButton type="success" cls="mx-2">
        success
    </KButton>
    <KButton type="primary" cls="mx-2">
        primary
    </KButton>
    <KButton type="warning" cls="mx-2">
        warning
    </KButton>
</div>

<div class="flex items-center mt-3 flex-wrap">
    <KButton icon="i-carbon-settings"
           type="info"
           cls="mx-2">
           settings
    </KButton>
    <KButton icon="i-carbon-logo-svelte"
             type="error"
           cls="mx-2">
        svelte
    </KButton>
    <KButton icon="i-carbon-logo-wechat"
             type="success"
           cls="mx-2">
        wechat
    </KButton>
    <KButton icon="i-carbon-logo-google"
             type="primary"
           cls="mx-2">
        google
    </KButton>
    <KButton icon="i-carbon-aperture"
             type="warning"
           cls="mx-2">
        aperture
    </KButton>
</div>

<div class="flex items-center mt-3 flex-wrap">
    <KButton icon="i-carbon-settings"
             type="info"
             round="20"
             cls="mx-2">
        settings
    </KButton>
    <KButton icon="i-carbon-logo-svelte"
             type="error"
             round="20"
             cls="mx-2">
        svelte
    </KButton>
    <KButton icon="i-carbon-logo-wechat"
             type="success"
             round="20"
             cls="mx-2">
        wechat
    </KButton>
    <KButton icon="i-carbon-logo-google"
             type="primary"
             round="20"
             cls="mx-2">
        google
    </KButton>
    <KButton icon="i-carbon-aperture"
             type="warning"
             round="10"
             cls="mx-2">
        aperture
    </KButton>
</div>

<div class="flex items-center mt-3 flex-wrap">
    <KButton icon="i-carbon-settings"
             type="info"
             circle
             cls="mx-2">
    </KButton>
    <KButton icon="i-carbon-logo-svelte"
             type="error"
             circle
             cls="mx-2">
    </KButton>
    <KButton icon="i-carbon-logo-wechat"
             type="success"
             circle
             cls="mx-2">
    </KButton>
    <KButton icon="i-carbon-logo-google"
             type="primary"
             circle
             cls="mx-2">
    </KButton>
    <KButton icon="i-carbon-aperture"
             type="warning"
             circle
             cls="mx-2">
    </KButton>
</div>
